import React, { Component } from 'react'
import {
  Card,
  Button, 
  List,
  Avatar,
  Badge,
  Spin,
  // Row,
  // Col,
} from 'antd'
import { connect } from 'react-redux'

import {
  markNotificationAsReadById, 
  markAllNotificationAsRead
} from '../../store/actions/notifications'

const mapState = state => {
  const {
    list,
    isLoading
  } = state.notifications
  return {
    list,
    isLoading
  }
}

@connect(mapState, { markNotificationAsReadById, markAllNotificationAsRead })

class Notifications extends Component {
  render() {
    console.log(this.props)
    return (
      <Spin spinning={this.props.isLoading}>
        <Card
          title="通知中心" 
          bordered={false}
          extra={
            <Button 
              disabled={this.props.list.every(item => item.hasRead === true)} 
              onClick={this.props.markAllNotificationAsRead}
            >
              全部标记为已读 {this.props.isLoading}
            </Button>
          } 
        >
          <List
            itemLayout="horizontal"
            dataSource={this.props.list}
            renderItem={item => (
              <List.Item
                extra={
                  item.hasRead 
                  ? 
                  null : 
                  <Button 
                    onClick={this.props.markNotificationAsReadById.bind(this, item.id)}
                  >
                    标记为已读
                  </Button>}
              >
                <List.Item.Meta
                  avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                  title={<a href="https://ant.design"><Badge dot={!item.hasRead}>{item.title}</Badge></a>}
                  description={item.desc}
                />
              </List.Item>
            )}
          />
        </Card>
      </Spin>
    )
  }
}


export default Notifications